<template>
	<div>
		<div v-if="original">
		<div class="graybg"></div>
		<!--头部-->
		<header id="header">
			<div class="header header_bg clearfix">
				<div class="header_left pull-left">
					<i class="iconfont baiColor" onclick="javascript:history.back(-1)">&#xe612;</i>
				</div>
				<div class="header_center baiColor">活积分转账</div>
			</div>
		</header>
		<div class="main _width">
			<div id="nav">
				<div class="nav">
					<div class="nav_each " :class="{activecolor:one}" @click="oneblock()">转账到对方活积分</div>
					<div class="nav_each " :class="{activecolor:two}" @click="twoblock()">转出到余额</div>
				</div>
			</div>
				<!--navToggle-->
			<div id="navToggle_mian">
				<div class="navToggle_mian">
					<!--第一块-->
					<ul class="indent_each_block one_mian" v-if="one">
						<div class="gathering marginAuto">
							<div class="gathering-each _width">
								<span>收款人姓名:</span>
								<input type="text" value="" placeholder="输入对方姓名" maxlength="4" v-model="nameJ"/>
							</div>
							<div class="gathering-each _width">
								<span>收款账号:</span>
								<input type="text" v-if="accountNumber" placeholder="输入对方 ID" maxlength="20" v-model="gathering"/>
								<span v-if="accountNumber == true ? false : true" v-text="gathering"></span>
							</div>
							<div class="gathering-each _width">
								<span>转账积分:</span>
								<input type="number" value="" @change="gatheringMoney" placeholder="转账金额不少于100.00" v-model="integralmoney"/>
							</div>
						</div>
						<div class="balance _width">
							<span>您的账号积分是<i v-text="balance"></i>,最多可转<i v-text="out"></i></span>
						</div>
						<div class="gathering marginAuto">
							<div class="gathering-each _width">
								<span>您需要支付:</span>
								<span v-text="pay"></span>
							</div>
							<div class="gathering-each _width">
								<span>实际到账:</span>
								<span v-text="account"></span>
							</div>
						</div>
						<div class="balance _width">
							<span>转账手续费<i>{{charge}}%</i></span>
						</div>	
						<div class="footer-button button baiColor" @click="footerbutton">
							<span>向对方转账</span>
						</div>
						
					</ul>
					<!--第二块-->
					<ul class="indent_each_block two_mian" v-if="two">
						<div class="roll marginAuto">
							<div class="gathering-each _width">
								<span>收款人姓名:</span>
								<input type="text" value="" placeholder="输入对方姓名" maxlength="4" v-model="nameY"/>
							</div>
							<div class="gathering-each" style="border: none;">
								<span>转账金额:</span>
								<input type="number" value="" @change="gatheringMoneysClick" placeholder="转账金额不少于100.00" v-model="balancemoney"/>
							</div>
							<div class="balance _width" style="text-align: left;">
								<span>您的账号余额是<i v-text="balances"></i>,最多可转<i v-text="outs"></i></span>
							</div>
							<div class="site _width">
								<div class="site_main _width">
									<h3>转账至：</h3>
									<div class="select _width">
										<div class="select_each">
											<span><input type="radio" name="integral" value="1" v-model="inputdata" /><em></em></span>
											<em>本人余额</em>
										</div>
										<div class="select_each">
											<span><input type="radio" name="integral" value="2" v-model="inputdata" /><em></em></span>
											<em>他人余额</em>
										</div>
									</div>
								</div>
								<div class="gathering-each" v-show="inputdata == 1 ? false : true">
									<span>收款人账号:</span>
									<input type="number" v-if="accountNumber" placeholder="转他人余额请填对方ID" v-model="gatherings"/>
									<span v-if="accountNumber == true ? false:true" v-text="gatherings"></span>
								</div>
								<div class="gathering-each _width">
									<span>您需要支付:</span>
									<span v-text="pays"></span>
								</div>
								<div class="gathering-each _width" style="border: none;">
									<span>实际到账:</span>
									<span v-text="accounts"></span>
								</div>
							</div>
							<div class="balance _width" style="text-align: left;">
								<span>转账手续费<i v-text="charges"></i>%</span>
							</div>	
							<div class="footer-button button baiColor" @click="enter">
								<span>确认</span>
							</div>
						</div>
					</ul>
				</div>
			</div>
		</div>
		</div>
		<!--活积分转活积分传给组件-->
		<newpaypass v-if="original == true ? false:true" :verifyPass="integralobj" :verifyBalanceobj = "balanceobj"></newpaypass>
	</div>
</template>

<script>
	import newpaypass from './newpaypass.vue';	//活积分转活积分传给组件
	
	export default{
		components:{newpaypass},
		data(){
			return{
				original:true,	//控制支付密码页面
				accountNumber:true,	//	判断是否是扫码进来
				//=》转账到对方活积分
				nameJ:"",	//转到活积分姓名
				rate:"",	//活积分转活积分费率
				gathering:"",//收款账号
				integralmoney:"",//转账金额
				balance:"00.00",//余额
				out:"",	//最多可转
				pay:"",	//需要支付的钱数
				account:"",//实际到账的钱数
				charge:"", //手续费
				integralobj:{}, //活积分转活积分传给组件参数
				
				//=》转出到余额
				nameY:"",	//转到余额姓名
				rates:"",	//活积分转余额费率
				gatherings:"",//收款账号
				balancemoney:"",//转账金额
				balances:"00.00",//余额
				outs:"",	//最多可转
				pays:"",	//需要支付的钱数
				accounts:"",//实际到账的钱数
				charges:"", //手续费
				balanceRates:"",	//积分转余额费率
				self:true,	//本人
				others:false,//他人
				inputdata:"1",	//转账至某处
				balanceobj:{},		//活积分转余额传给组件
				
				//导航切换
				one:true,
				two:false
			}
		},
		mounted(){
			var _this = this;
			var info = window.localStorage.data; 
			var params = new URLSearchParams();
			params.append('token', info);
			var str=window.location.href;
			var num=str.lastIndexOf("/")+1;
			var id = str.substring(num);
			_this.gathering = id;
			if(id == "&"){
				this.accountNumber = true;
				this.gathering = "";
				this.gatherings = "";
			}else{
				this.accountNumber =false;
//				扫码进来的数据
				this.gathering = id;
				this.gatherings = id
			};

			this.$axios({
			   url:"Home/Money/egral_dh",
				method:"post",
				data:params
			}).then(function(res){
			   	let datas = res.data.data;
			   	for(var i in datas){
			   		if(datas[i].c_key == "huo_egral"){	//活积分转余额费率
			   			_this.rates = datas[i].c_val/100;
			   			_this.charges  = datas[i].c_val;
			   		}else if(datas[i].c_key == "huo_egral_zh"){	//活积分转活积分费率
			   			_this.rate = datas[i].c_val/100;
			   			_this.charge = datas[i].c_val;
			   		}else if(datas[i].c_key == "egral_money"){	//活积分兑换比例
			   			_this.balanceRates = datas[i].c_val;
			   		}
			   	};
			   	//转账到对方活积分
			   	_this.balance = datas.user_egral_huo;	//积分余额
//			   	_this.balances =parseFloat(_this.balance*_this.rates).toFixed(2);	//金额余额
				_this.balances = _this.balance;
			   	let outF =_this.balance*1-(_this.balance*_this.rate);	//活积分转活积分=》最多可转
			   	
			   	_this.out = outF;	//最多可转
			   	_this.outs = _this.balance;	//活积分转余额=》最多可转
			}).catch(function(err){
				console.log(err)
			})
		},
		watch:{
			inputdata:function(value){
				let _this = this;
				let balancemoney = _this.balancemoney;	//转账金额
				if(value == 1){
					if(balancemoney == ""){
						_this.pays = "";
						_this.accounts = "";
					}else{
						_this.pays =balancemoney;  //需支付
						_this.accounts =parseFloat(balancemoney*1-_this.charges*1).toFixed(2);	//实际到账
					}
				}else if(value == 2){	//积分转余额
					if(balancemoney == ""){
						_this.pays = "";
						_this.accounts = "";
					}else{
						_this.pays =balancemoney  //需支付；	==》输入金额
						_this.accounts =parseFloat(balancemoney*1 - _this.charges*1).toFixed(2);	//实际到账==》	输入金额-输入金额*费率
					}
				}
				this.inputdata = value;
			}
		},
		methods:{
		//==>转账到对方活积分部分
			//获取页面中相关的数据
			gatheringMoney(){
				let _this = this;
				let gathering =  this.gathering;
				let integralmoney = this.integralmoney;
				if(integralmoney < 99){
					alert("转账金额不少于100元");
				}else if(integralmoney>_this.out){
					alert("您已超过最大转账金额");
				}else{
					let service =integralmoney*_this.rate; 	//转账手续费
					_this.pay = parseFloat(service*1+integralmoney*1).toFixed(2);	//需支付
					_this.account =integralmoney;	//实际到账
				}
			},
			//点击向对方转账
			footerbutton(){
				let _this  = this;
				let gathering = _this.gathering;
				let codegathering = _this.accountid;
				let integralmoney = _this.integralmoney;
				let name = _this.nameJ;
				
				if(gathering == "" || integralmoney == ""){
					alert("请将转账信息填写完整");
				}else{
						//提供给组件参数
					_this.integralobj = {
						type : 1,//转积分
						s_user_id:gathering,//对方账号
						price:integralmoney,//转账金额
						types:2,//	转向某人1：转自己2、转他人
						name:name,//转账人姓名
						transferType:"hzh"	//活积分转活积分
					};
					_this.original = false;
					
//					let params = new URLSearchParams();
//					params.append('token', info);	//客户秘钥（信息）
//					params.append('type',1);	
//					params.append('name',name);	
//					params.append('s_user_id',gathering);	
//					params.append('price',integralmoney);	
//					params.append('types',2);	
//					
//					this.$axios({
//					   url:"Home/Money/huo_egral_transaction",
//						method:"post",
//						data:params
//					}).then(function(res){
//						if(res.data == 0){
//							alert("转账失败请重新转账")
//						}else if(res.data == 1){
//							alert("转账成功")
//							_this.$router.push("wShares");
//						}else if(res.data == 2){
//							alert("缺少相应参数")
//						}else if(res.data == 3){
//							alert("积分不足")
//						}else if(res.data == 4){
//							alert("收款用户不存在，请重新输入")
//						}
//					}).catch(function(err){
//						console.log(err)		
//					});
				};
			},
		//==>转账到余额部分

			//获取页面中相关的数据
			gatheringMoneysClick(){
				let _this = this;
				let balancemoney = _this.balancemoney;	//转账金额
				if(balancemoney <= 99){
					alert("转账金额不少于100元")
				}else if(balancemoney*1 > _this.outs*1){
					alert("您已超过最大转账金额")
				}else{
					_this.pays =balancemoney  //需支付
					_this.accounts =parseFloat(balancemoney*1-balancemoney*_this.rates).toFixed(2);	//实际到账
				}
			},
			//确认
			enter(){
				let _this = this;
				var info = window.localStorage.data;
				let gatherings = _this.gatherings;	//收款账号
				let balancemoney = _this.balancemoney;//转账积分数
				let inputdata = _this.inputdata;	//1：转余额给自己；2：转余额给他人
				let name = _this.nameY;				//如果转给他人需要填写转账人姓名
				_this.balanceobj ={
					type:2,	//类型
					price:balancemoney,
					s_user_id:gatherings,
					inputdata :inputdata,
					name:name,
					transferType:"hzy"	//活积分转余额
				};
				_this.original = false;
				console.log(gatherings)
//				let params = new URLSearchParams();
//					params.append('token', info);	//客户秘钥（信息）
//					params.append('type',2);
//					params.append('price',balancemoney);
//					params.append('s_user_id',gatherings);
//					params.append('name',name);	//转账人姓名
//				if(inputdata == 1){
//					if(balancemoney == ""){
//						alert("请填写您的转账金额")
//					}else{	//转余额给自己
//						params.append('types',1);
//						this.$axios({
//						   url:"Home/Money/huo_egral_transaction",
//							method:"post",
//							data:params
//						  }).then(function(res){
//						  	console.log(res.data)
//						  	if(res.data == 0){
//								alert("转账失败请重新转账")
//							}else if(res.data == 1){
//								alert("转账成功")
//								_this.$router.push("wShares");
//							}else if(res.data == 2){
//								alert("缺少相应参数")
//							}else if(res.data == 3){
//								alert("积分不足")
//							}else if(res.data == 4){
//								alert("收款用户不存在，请重新输入")
//							}
//						}).catch(function(err){
//							console.log(err)		
//						})
//					}
//				}else if(inputdata == 2){	//转余额给他人
//					if(balancemoney == "" || gatherings== ""){
//						alert("请填写您的转账金额")
//					}else{
//						params.append('types',2);
//						this.$axios({
//						   url:"Home/Money/huo_egral_transaction",
//							method:"post",
//							data:params
//						 }).then(function(res){
//							if(res.data == 0){
//								alert("转账失败请重新转账")
//							}else if(res.data == 1){
//								alert("转账成功")
//								_this.$router.push("wShares");
//							}else if(res.data == 2){
//								alert("缺少相应参数")
//							}else if(res.data == 3){
//								alert("积分不足")
//							}else if(res.data == 4){
//								alert("收款用户不存在，请重新输入")
//							}
//						}).catch(function(err){
//							console.log(err)		
//						})
//					}
//				}
			},
			
			//导航切换
			oneblock(){
				this.one = true,
				this.two = false
			},
			twoblock(){
				this.one = false,
				this.two = true
			}
		}
	}
</script>

<style scope>
	@import "../css/public.css";
	@import "../css/wfreeze.css";
	.main{
		padding-top: 40px;
	}
	
	.activecolor{
		color: #F3961F !important;
		border-color:#F3961F !important;
	}
	.nav .nav_each{
		width: 140px;
		line-height: 48px;
		border-bottom: 3px solid #F0F0F0;
	}
	.indent_each_block{
		margin-top: 10px;
	}
	/*转出的余额*/
	.roll{
		width: 90%;
	}
	.gathering-each{
		background: #fff;
	}
	.site{
		background: #fff;
	}
	.site_main{
		padding: 10px 0 5px;
		border-bottom: 1px solid #e0dada;
	}
	.site_main h3{
		font-size: 16px;
		color:#333333;
		margin-left: 12px;
	}
	.select{
		height: 40px;
		display: flex;
		justify-content: space-around;
	}
	.select_each span{
		position: relative;
		display: inline-block;
		width: 15px;
		height: 15px;
		border: 1px solid #dcd4d4;
		margin-right: 5px;
		border-radius: 50%;
		line-height: 38px;
		vertical-align: sub;
	}
	.select_each span input{
		position: absolute;
		top: 0;
		left: 0;
		width: 15px;
		height: 15px;
		opacity: 0;
		z-index: 2;
	}
	.select_each span em{
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.select_each span input:checked~em{
		background: radial-gradient(#fff 30%,#F3961F 30%);
	}
	.select_each em{
		line-height: 38px;
		font-size:16px;
		color: #333333;
	}
</style>